<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .talk-window {
      width: 450px;
      height: 400px;
      background-color: whitesmoke;
      box-shadow: 0 0 10px #ccc;
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .tw-title {
      text-align: center;
      line-height: 40px;
      font-size: 14px;
      font-weight: bold;
      color: #666;
      position: relative;
    }
    .close-tw-window {
      display: inline-block;
      width: 20px;
      height: 20px;
      position: absolute;
      right: 10px;
      top: 10px;
      line-height: 20px;
      font-size: 24px;
      cursor: pointer;
      color: #666;
    }
    .close-tw-window:hover {
      color: #333;
    }
    .tw-content {
      padding: 0 10px 150px;
      width: 100%;
      height: calc(100% - 40px);
    }
    .talk-list-div {
      width: 100%;
      height: 100%;
      border: 5px double #ccc;
      padding: 5px 10px;
      overflow: auto;
    }
    .left{
        float: left;
    }
    .right{
        float: right;
    }
    .msg-div {
      overflow: hidden;
      margin: 20px 0;
    }
    .other-msg-div {
      float: left;
      max-width: 260px;
      position: relative;
      padding-left: 35px;
    }
    .header-img-div {
      width: 30px;
      height: 30px;
      overflow: hidden;
      border-radius: 30px;
    }
    .other-msg-div .header-img-div {
      position: absolute;
      left: 0;
      top: 5px;
    }
    .my-msg-div {
      float: right;
      max-width: 260px;
      position: relative;
      padding-right: 35px;
    }
    .my-msg-div .header-img-div {
      position: absolute;
      right: 0;
      top: 5px;
    }
    .header-img-div img {
      width: 100%;
      height: 100%;
    }
    .msg-content {
      padding: 10px;
      border-radius: 5px;
    }
    .other-msg-div .msg-content {
      background-color: #f4ecdd;
      color: #333;
    }
    .my-msg-div .msg-content {
      background-color: #403dff;
      color: white;
    }
    .talk-operate-div {
      width: 100%;
      height: 150px;
      position: absolute;
      bottom: 0;
      left: 0;
      padding: 5px 10px 0 10px;
    }
    .emoji-dialog{
        position: absolute;
        bottom: 100%;
        left: 0;
        display: none;
        width: 100%;
        box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.8);
        background-color: #fff;
        padding: 10px;
    }
    .emoji-dialog-list{
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        width: 100%;
    }
    i {
        font-style: normal;
        cursor: pointer;
        font-size: 15px;
        margin: 4px;
    }
    .talk-operate-btn-list {
      width: 100%;
      height: 30px;
      line-height: 30px;
      background-color: white;
      margin-bottom: 5px;
      font-size: 12px;
    }
    .talk-operate-textarea {
      height: 75px;
    }
    .talk-operate-textarea textarea {
      width: 100%;
      max-height: 70px;
      min-height: 70px;
      height: 70px;
      padding: 5px 10px;
      background-color: white;
      outline: none;
      max-width: 100%;
      min-width: 100%;
      resize: none;
    }
    .send-btn {
      text-align: right;
    }
    .send-btn span {
      display: inline-block;
      padding: 0 20px;
      background-color: #403dff;
      color: white;
      font-size: 14px;
      line-height: 30px;
      cursor: pointer;
      border-radius: 5px;
    }
  </style>
  <body>
    <div id="talk-window" class="talk-window">
      <div class="tw-title">
        聊天窗口
        <span class="close-tw-window">×</span>
      </div>
      <div class="tw-content">
        <div class="talk-list-div" id="talk-list">
          <a href="javascript:;" id="bottom-link"></a>
        </div>
        <div class="talk-operate-div">
          <div class="talk-operate-btn-list">
            <i onclick="emojiDialog()">&#x1F600</i>
            <span>可添加emoji表情等附加功能按钮</span>
          </div>
          <div class="emoji-dialog" id="emoji-dialog">
            <div class="emoji-dialog-list" id="emoji-dialog-list"></div>
            </div>
          <div class="talk-operate-textarea">
            <textarea
              name="inp"
              id="inp"
              placeholder="请输入你想发送的话"
            ></textarea>
          </div>
          <div class="send-btn">
            <span onclick="send();">发 送</span>
          </div>
        </div>
      </div>
    </div>

    <script type="text/javascript">
      let ws;
      const host = {
        name: '世秀'
      }
      const talkList = document.querySelector('#talk-list')
      const emojiDia = document.querySelector('#emoji-dialog')
      const emojiList = document.querySelector('#emoji-dialog-list')
      const inp = document.querySelector("#inp")
      const emoji = ['&#x1F600;', '&#x1F601;', '&#x1F602;', '&#x1F603;', '&#x1F604;', '&#x1F605;', '&#x1F606;', '&#x1F607;', '&#x1F608;', '&#x1F609;', '&#x1F60A;', 
      '&#x1F60B;', '&#x1F60C;', '&#x1F60D;', '&#x1F60E;', '&#x1F60F;', '&#x1F610;', '&#x1F611;', '&#x1F612;', '&#x1F613;', '&#x1F614;', '&#x1F615;', '&#x1F616;', '&#x1F617;', '&#x1F618;', '&#x1F619;', '&#x1F61A;',
      '&#x1F61B;', '&#x1F61C;', '&#x1F61D;', '&#x1F61E;']
      for (let i = 0; i < emoji.length; i++) {
        const item = document.createElement('i')
        item.innerHTML = emoji[i]
        item.onclick = () => {
            inp.value += emoji[i]
            emojiDialog()
        }
        emojiList.appendChild(item)
      }
      window.onload = function () {
        listener()
        ws = new WebSocket("ws://192.168.43.151:1111"); //端口号和websocket对象创建的server的监听端口号一致；
        ws.onopen = function () {
          //websocket的4种状态
          console.log("ws is opening");
        };
        ws.onmessage = function (mydata) {
          const div = document.createElement("div");
          div.style.overflow = 'hidden'
          const data = JSON.parse(mydata.data);
          if (data.from === host.name) {
            div.innerHTML = `<p class='right'><span>${data.content}</span>：我</p>`;
          } else {
            div.innerHTML = `<p class='left'><span>${data.from}</span>：${data.content}</p>`;

          }
          talkList.appendChild(div);
        };
        ws.onclose = function () {
          console.log("ws is closed");
        };
        ws.onerror = function () {
          console.log("ws is error");
        };
      };
      /**
       * 消息发送
       **/
      function send() {
        const str = inp.value;
        if (str == "") {
          alert("请输入内容");
        } else {
          const param = {
            from: host.name,
            content: str,
          };
          ws.send(JSON.stringify(param));
          inp.value = "";
        }
      }
      /**
       * 表情弹框
       **/
      function emojiDialog() {
        if (emojiDia.style.display === 'none' || emojiDia.style.display === '') {
            emojiDia.style.display = 'block'
        } else {
            emojiDia.style.display = 'none'
        }
      }
      /**
       * 键盘监听回车
       **/
      function listener() {
        document.onkeydown = function (e){
            if(window.event){
                e = window.event;
            }
            const int_keycode = e.charCode || e.keyCode;
            if(int_keycode == '13'){
                send()
            }
        }
      }
    </script>
  </body>
</html>
